<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Deepseek API 调用</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex min-h-screen">
<!-- 左侧菜单 -->
<div class="w-64 bg-white shadow-lg p-4">
  <h2 class="text-lg font-semibold text-gray-800">对话历史</h2>
  <ul class="mt-4 space-y-2">
    <li class="text-gray-700 hover:bg-gray-100 p-2 rounded">对话1</li>
    <li class="text-gray-700 hover:bg-gray-100 p-2 rounded">对话2</li>
    <!-- 更多对话历史 -->
  </ul>
</div>

<!-- 右侧主内容 -->
<div id="app" class="flex-1 p-8 bg-white shadow-lg">
  <h1 class="text-3xl font-bold text-center mb-6">Deepseek API 调用</h1>
  <div class="space-y-6">
    <!-- 对话内容显示 -->
    <div class="h-96 overflow-y-auto border border-gray-300 rounded-lg p-4 bg-gray-50">
      <div v-for="(message, index) in messages" :key="index" class="mb-4">
        <div class="text-gray-700">{{ message }}</div>
      </div>
    </div>
    <!-- 输入框 -->
    <div>
      <textarea id="inputText" rows="4" v-model="inputText" @keyup.enter="callDeepseekApi" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" placeholder="请输入要处理的内容..."></textarea>
    </div>
    <!-- 提交按钮 -->
    <div class="flex justify-center">
      <button id="submitBtn" @click="callDeepseekApi" class="bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700 transition duration-300">提交</button>
    </div>
  </div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      inputText: '',
      messages: []
    },
    methods: {
      callDeepseekApi() {
        if (this.inputText.trim() === '') return;
        this.messages.push(`用户: ${this.inputText}`);
        axios.get('/ai/qianfan', {
          params: {
            input: this.inputText
          }
        })
                .then(response => {
                  this.messages.push(`AI: ${JSON.stringify(response.data, null, 2)}`);
                  this.inputText = ''; // 清空输入框
                  this.scrollToBottom();
                })
                .catch(error => {
                  console.error('请求失败:', error);
                  this.messages.push('AI: 请求失败，请检查您的输入或网络状况。');
                  this.scrollToBottom();
                });
      },
      scrollToBottom() {
        const container = this.$el.querySelector('.overflow-y-auto');
        container.scrollTop = container.scrollHeight;
      }
    }
  });
</script>
</body>
</html>
